Open Bug 1425252 Opened 7 years ago Updated 1 year ago

On Costco.com, no autofill dropdown shown up for the Card Number field

Categories

(Toolkit :: Form Autofill, defect, P3)

Product:
Toolkit
Component:
Form Autofill
Type:
defect

Tracking

()

People

(Reporter: Ovidiu, Unassigned)

References

(Depends on 1 open bug, Blocks 3 open bugs)

Details

(Whiteboard: [cc-autofill-reserve])

Attachments

(2 files)

LatestNightly79
276.62 KB, video/mp4
Details
Bug 1425252: Include raw fields in iframes as part of a containing form
47 bytes, text/x-phabricator-request
Details | Review
[Affected versions]: Tested on Nightly 59.0a1(2017-12-14) [Affected platforms]: Tested on Mac 10.12 [Steps to reproduce]: Prerequisites: 1. Make sure you have at least two saved profiles. 1. Go to www.costco.com 2. Log in to your account -> My Account -> Payment Methods 3. Click on the fields [Expected result]: A drop down with your profile suggestions should be displayed. [Actual result]: There are no autofill suggestions. Note: Please see the video for a better understanding. https://streamable.com/p0via
Blocks: formautofill-compatibility
Whiteboard: [form autofill: V2]
Thanks for reporting this issue. I have some comments for the STR. (In reply to ovidiu boca[:Ovidiu] from comment #0) > [Affected versions]: > > Tested on Nightly 59.0a1(2017-12-14) > > [Affected platforms]: > > Tested on Mac 10.12 > > [Steps to reproduce]: > > Prerequisites: > 1. Make sure you have at least two saved profiles. I can reproduce this with one credit card profile only. I suppose this issue is not related to the count of (credit card) profiles. > > > 1. Go to www.costco.com > 2. Log in to your account -> My Account -> Payment Methods > 3. Click on the fields > > > [Expected result]: > > A drop down with your profile suggestions should be displayed. The preview feature should work as well. > > [Actual result]: > > There are no autofill suggestions. The dropdown does show, but it will disappear when hovering on any profile. > > Note: Please see the video for a better understanding. > https://streamable.com/p0via There are 2 issues here: 1. The preview style makes the dropdown behavior weird. Removing `filter` [1] for `:-moz-autofill-preview` can fix this. However, the workaround is not a solution. diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css index f9e64dd6d296..37b7faf6d5dd 100644 --- a/layout/style/res/forms.css +++ b/layout/style/res/forms.css @@ -1128,7 +1128,7 @@ input[type="time"] { font-family: -moz-fixed; } -:-moz-autofill, :-moz-autofill-preview { +:-moz-autofill { filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%); } :-moz-autofill-preview { 2. The card holder name field is not detected, so the value can't be filled correctly. [1] https://searchfox.org/mozilla-central/rev/110706c3c09d457dc70293b213d7bccb4f6f5643/layout/style/res/forms.css#1132
For the credit card number card, it's actually an input inside an iframe and the original card number is hidden, so even chrome could not trigger/fill on card number field either. For the card holder name field, it's "cc_nameoncard" for the input id/name, and the "Cardholder Name" for label value and input title. Might need a loosen regex for this.
There are actually three issues related to www.costco.com: 1. No dropdown in the Card Number field. 2. No dropdown in the Cardholder Name field. 3. The dropdown is dismissed accidentally when hovering any item in the dropdown in the Expiration Date field. For 1, per comment 2, the card number field is located in a different iframe, and therefore can't be grouped with other fields. For this reason, it can't be fixed on our side. For 2, it's a heuristics bug that we can't identify the Cardholder Name field. It can be fixed by improving the heuristics rules. Let's track this in this bug. For 3, per comment 1, it looks like a generic CSS rendering issue that causes the autocomplete dropdown to be dismissed accidentally. I'll file another bug for tracking this. That is to say, this bug will be used to deal with #2. However, since #1, the issue of Card Number, can't be fixed eventually, it'll be less useful to only fix Cardholder Name in www.costco.com. Therefore, I think it shouldn't be a blocker of the V2 scope. I'd like to remove the V2 flag and change the title accordingly.
Summary: On Costco.com the credit card fields are not working → On Costco.com, no dropdown shown up in the Cardholder Name field
Whiteboard: [form autofill: V2]
See Also: → 1428259
Cardholder name markup: ``` <label for="cc_nameoncard">Cardholder Name</label> <input class="form-control ctHidden" title="Cardholder Name" id="name" aria-describedby="cc_nameoncard_validation" name="name" value="" type="text"> ``` The field is identified as "name" field of address type, and ends up being ignored. Two main issues by looking at the markup: 1. no connection between label and input, so we miss the extremely useful "Cardholder Name" string while parsing. 2. the value "name" is too vague to tell which type of section it should belong to The information is quite poor for name parser in this case, so I expect adding some post processing to adjust irrational fields would make more sense. i.e. A credit card section without identified "cc-name" field plus an invalid address section with only a "name" field, then we can assume the "name" field is actually a "cc-name".
Assignee: nobody → ralin
Priority: -- → P3

Tested on latest Nightly 79.0a1 (2020-06-03) on Windows 10 and MacOS 10.13 with the following results on both the checkout payment form and account payment methods:

  1. No dropdown in the Card Number field.
  2. Autofill dropdown is now displayed for the Cardholder Name
  3. The dropdown is dismissed accidentally when hovering any item in the dropdown in the Expiration Date or the Cardholder Name field.

Editing bug summary to reflect the actual behavior. Attaching recording for reference.

Summary: On Costco.com, no dropdown shown up in the Cardholder Name field → On Costco.com, no autofill dropdown shown up for the Card Number field
Whiteboard: [ccautofill]
Priority: P3 → P2
Whiteboard: [ccautofill] → [cc-autofill-mvp]
Assignee: ralin → nobody
Assignee: nobody → adam
Status: NEW → ASSIGNED

Oh, wow -- it's even stranger than that. Costco puts the credit card number -- and only the number -- off in its own frame, with a source of something like https://na.accpg.accertify.net/form/version/39/merchant/COST-BC0847/role/number/inputField.do?debug=false&cacheToken=<numbers>. This frame contains some minified script (https://na.accpg.accertify.net/form/version/39/fieldsInternal.js?debug=false) that apparently captures the value being entered and conveys it to the parent document. While it's almost certainly possible to work around this behavior, it's not going to be trivial, and it's almost certainly going to be a one-off fix that is hyper-specific to Costco's website.

This seems like the kind of case that would be better served by having someone from the web evangelist team contacting Costco rather than sinking substantial engineering resources into hacking around on our end.

I'm currently looking at the feasibility of grafting child frames into their containing <form> elements if they do not, themselves, contain <forms>, which would (I think) address not just Costco, but this entire pattern (should it appear elsewhere).

I've attached a WIP proof-of-concept patch that handles the FormLikeFactory changes necessary to implement the <iframe> inclusion described above. The FormAutofillHeuristics still needs to be adjusted to properly assign fields inside an <iframe>. Also, this current patch only works in a pre-fission world. It will need to be updated to handle fission before it lands.

The plan is to back-burner this work until and unless we find other important payment forms that show this same pattern.

Assignee: adam → nobody
Status: ASSIGNED → NEW
Whiteboard: [cc-autofill-mvp] → [cc-autofill-reserve]
Blocks: 1645737
Priority: P2 → P3
Severity: normal → S3

I can't seem to reproduce this bug anymore. Tested in Beta v116.0b5 on Windows 10 x32.

Depends on: 1815399
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: